import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import React, { Ref, useRef, useEffect } from 'react';
import { RuleManageAPI } from '../common/type';
import { Col, Form, Row, Spin, TreeSelect, message } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { getFlowOrgTreeByOrgIDService } from '@/services/BaseLayout';
import { getDeptPosTreeIcon, getPosIDs } from '@/utils';
import { enableServices } from '../services/UpdateService';

export const SwtichModal: React.FC<RuleManageAPI.ISwtichAPI> = ({ onClose, isShowSwitch, reloadRequest }) => {
  let {
    resObj: { title, isOpen, record },
  } = isShowSwitch;

  /**弹框的ref*/
  const SwitchModalRef: Ref<IOneModalRef> = useRef(null);

  /**关闭弹窗方法*/
  const onCloseModal = () => {
    if (SwitchModalRef) {
      if (SwitchModalRef.current) {
        if (SwitchModalRef.current.onModalCancel) {
          SwitchModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 是否启用变更回调
   * */
  const enableCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      reloadRequest();
      onCloseModal();
    }
  };

  /**
   * 是否启用变更接口
   * */
  const { enableRun, enableloading } = enableServices(enableCallback);

  /**点击确定*/
  const saveSwitch = () => {
    enableRun({
      id: record?.id,
      versionNum: record?.versionNum,
      isOpen: Number(isOpen),
    });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={SwitchModalRef}
        title={title + '规则'}
        width={document.body.clientWidth * 0.25}
        onCancel={onClose}
        bodyStyle={{
          padding: '5px 0px',
        }}
        centered
        onOk={saveSwitch}
        confirmLoading={enableloading}
      >
        <Spin spinning={enableloading}>
          <div style={{ textAlign: 'center', fontSize: '1.2rem', lineHeight: '100px' }}>
            确认是否【<span style={{ color: 'red' }}>{title}</span>】规则?
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
